<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 Baidu, Inc. All Rights Reserved.
  -->
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <div class="fixed-table-toolbar">
                    <div class="columns pull-right">
                        <button class="btn btn-success" onclick="reLoad()">查询</button>
                    </div>
                    <div class="columns pull-right col-md-2 nopadding">
                        <input id="order_no" type="text" class="form-control"
                               placeholder="订单编号">
                    </div>
                    <div class="columns pull-right col-md-2 nopadding">
                        <input id="receiver" type="text" class="form-control"
                               placeholder="收件人">
                    </div>
                    <div class="columns pull-right col-md-2 nopadding">
                        <input id="mobile" type="text" class="form-control"
                               placeholder="收件人手机">
                    </div>
                    <div class="columns pull-right col-md-2 nopadding">
                        <select id="status_id" class="form-control">
                            <option value="">选择订单状态</option>
                            <option value="0">未支付</option>
                            <option value="1">待发货</option>
                            <option value="2">待收货</option>
                            <option value="3">已完成</option>
                            <option value="-1">已取消</option>
                            <option value="-2">已过期</option>
                            <option value="-3">无效订单</option>
                        </select>
                    </div>
                </div>
                <table id="exampleTable" data-mobile-responsive="true">
                </table>
            </div>
        </div>
    </div>
    <!--shiro控制bootstraptable行内按钮看见性 来自bootdo的创新方案 -->
    <div>
        <script type="text/javascript">
            var s_edit_h = 'hidden';
            var s_remove_h = 'hidden';
        </script>
    </div>
    <div shiro:hasPermission="blog:bContent:edit">
        <script type="text/javascript">
            s_edit_h = '';
        </script>
    </div>
    <div shiro:hasPermission="blog:bContent:remove">
        <script type="text/javascript">
            var s_remove_h = '';
        </script>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" data-keyboard="true" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">修改订单状态</h4>
            </div>
            <div class="modal-body form-horizontal">
                <div class="form-group" hidden="hidden">
                    <label class="col-sm-2 control-label" for="model_id">编号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="model_id" name="id"
                               placeholder="编号">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="model_orderNo_id">订单编号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="model_orderNo_id" name="orderNo" disabled="disabled">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="model_status">订单状态</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="model_status" name="orderStatus"
                               disabled="disabled">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="model_status_new">修改订单状态</label>
                    <div class="col-sm-10">
                        <select class="form-control" id="model_status_new" name="orderStatusNew">
                            <option value="">选择订单状态</option>
                            <option value="0">未支付</option>
                            <option value="1">待发货</option>
                            <option value="2">待收货</option>
                            <option value="3">已完成</option>
                            <option value="-1">已取消</option>
                            <option value="-2">已过期</option>
                            <option value="-3">无效订单</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="model_modify_btn_id">修改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<div th:include="include :: footer"></div>

<script language="javascript" type="text/javascript" src="/assets/javascript/bootstrap-typeahead.js"></script>
<script language="javascript" type="text/javascript" src="/assets/javascript/func.js"></script>
<script type="text/javascript">

    var prefix = "/order/list"

    $(function() {
        $.fn.typeahead.Constructor.prototype.blur = function () {
            var that = this;
            setTimeout(function () { that.hide() }, 250);
        };
        $("#username_id").typeahead({
            insertPoint:$("#username_id"),
            source: function (query, process) {
                $.get('/search_user?keyword=' + query + "&findChildren=0", "", function (data) {
                    process(data);
                })
            }
        });
        $("#model_modify_btn_id").click(function () {
            var newStatus = $("#model_status_new").val();
            var id = $("#model_id").val();
            if(!newStatus){
                alert('请选择要修改的状态');
                return;
            }
            if(!confirm("你确认要修改订单的状态吗？")){
                return;
            }
            var data = {"id":id,"status":newStatus};
            $.ajax({
                type: "POST",
                url: "/order/modify_status",
                data: JSON.stringify(data),
                dataType: "json",
                contentType:"application/json;charset=utf8",
                success: function(res){
                    if(res.code==0){
                        // 提交成功
                        alert('提交成功');
                        $("#myModal").modal('hide');
                        reLoad();
                    }else{
                        alert('提交失败，'+res.msg)
                    };
                },
                complete:function(){
                    isajax = false;
                }
            });
        });
        load();
    });

    function load() {
        $('#exampleTable')
            .bootstrapTable(
                {
                    method : 'get', // 服务器数据的请求方式 get or post
                    url : prefix + "/list", // 服务器数据的加载地址
                    // showRefresh : true,
                    // showToggle : true,
                    showColumns : true,
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    pagination : true, // 设置为true会在底部显示分页条
                    // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect : false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 10, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    // search : true, // 是否显示搜索框
                    //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                    // "server"

                    queryParams : function(params) {
                        return {
                            // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit : params.limit,
                            offset : params.offset,
                            orderNo : $("#order_no").val(),
                            mobile : $("#mobile").val(),
                            receiver : $("#receiver").val(),
                            status : $("#status_id").val()
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns : [
                        {
                            checkbox : true
                        },
                        {
                            visible : true,
                            field : 'orderNo',
                            title : '订单编号'
                        },
                        {
                            visible : true,
                            field : 'orderTitle',
                            title : '名称'
                        },
                        {
                            visible : false,
                            field : 'userId',
                            title : '客户id'
                        },
                        {
                            visible : true,
                            field : 'username',
                            title : '客户'
                        },
                        {
                            field : 'orderStatus',
                            title : '状态',
                            align : 'center',
                            formatter : function(value, row, index) {
                                if (value == '0') {
                                    return '<span class="label label-danger">未支付</span>';
                                } else if (value == '-1') {
                                    return '<span class="label label-primary">已取消</span>';
                                }else if (value == '-2') {
                                    return '<span class="label label-primary">已过期</span>';
                                }else if (value == '-3') {
                                    return '<span class="label label-primary">无效订单</span>';
                                }else if (value == '1') {
                                    return '<span class="label label-primary">待发货</span>';
                                }else if (value == '2') {
                                    return '<span class="label label-primary">待收货</span>';
                                }else if (value == '3') {
                                    return '<span class="label label-primary">完成</span>';
                                }
                            }
                        },
                        {
                            visible : false,
                            field : 'productId',
                            title : '商品ID'
                        },
                        {
                            visible : true,
                            field : 'amount',
                            title : '金额(元)'
                        },
                        {
                            visible : false,
                            field : 'cancelTime',
                            title : '取消时间'
                        },
                        {
                            visible : false,
                            field : 'expirationTime',
                            title : '过期时间'
                        },
                        {
                            visible : true,
                            field : 'address',
                            title : '地址'
                        },
                        {
                            visible : true,
                            field : 'mobile',
                            title : '手机'
                        },
                        {
                            visible : true,
                            field : 'receiver',
                            title : '收件人'
                        },
                        {
                            visible : true,
                            field : 'payChannel',
                            title : '支付渠道'
                        },
                        {
                            visible : true,
                            field : 'createTime',
                            title : '创建时间'
                        },
                        {
                            visible : false,
                            field : 'lastModifyTime',
                            title : '修改时间'
                        },
                        {
                            visible : false,
                            field : 'createUserId',
                            title : '创建人ID'
                        },
                        {
                            visible : false,
                            field : 'quantity',
                            title : '数量'
                        },
                        {
                            visible : false,
                            field : 'salePrice',
                            title : '单价'
                        },
                        {
                            visible : false,
                            field : 'isFr',
                            title : '是否已分润'
                        },
                        {
                            title : '操作',
                            field : 'id',
                            align : 'center',
                            formatter:function (value,row,index) {
                                var e =
                                    '<a class="btn btn-primary btn-sm '+s_edit_h+'" data-toggle="modal" data-target="#myModal" href="#" mce_href="#" title="编辑" onclick="edit(\''
                                    + row.id
                                    + '\',\''+row.orderNo+'\',\''+row.orderStatus+'\')"><i class="fa fa-edit"></i></a> ';
                                var d = '<a class="btn btn-warning btn-sm '+s_remove_h+'" href="#" title="删除"  mce_href="#" onclick="remove(\''
                                    + row.id
                                    + '\')"><i class="fa fa-remove"></i></a> ';
                                var f = '<a class="btn btn-success btn-sm" href="#" title="预览"  mce_href="#" onclick="preview(\''
                                    + row.id
                                    + '\')"><i class="fa fa-rocket"></i></a> ';
                                return e;
                            }
                        }
                        ]
                });
    }
    function reLoad() {
        $('#exampleTable').bootstrapTable('refresh');
    }
    function add() {
        var addPage = layer.open({
            type : 2,
            title : '增加',
            maxmin : true,
            shadeClose : false, // 点击遮罩关闭层
            area : [ '800px', '520px' ],
            content : prefix + '/add' // iframe的url
        });
        layer.full(addPage);
    }
    function edit(cid,orderNo,status) {
        $("#myModal").show();
        $("#model_id").val(cid);
        $("#model_orderNo_id").val(orderNo);
        var statusName = "无效订单";
        if(status==-2){
            statusName = "已过期"
        }else if(status==-1){
            statusName = "已取消"
        }else if(status==0){
            statusName = "未支付"
        }else if(status==1){
            statusName = "待发货"
        }else if(status==2){
            statusName = "待收货"
        }else if(status==3){
            statusName = "完成"
        }
        $("#model_status").val(statusName)
       // $("#J_hiden_id").val(cid);
    }
    function remove(id) {
        layer.confirm('确定要删除选中的记录？', {
            btn : [ '确定', '取消' ]
        }, function() {
            $.ajax({
                url : prefix + "/remove",
                type : "post",
                data : {
                    'id' : id
                },
                success : function(r) {
                    if (r.code == 0) {
                        layer.msg(r.msg);
                        reLoad();
                    } else {
                        layer.msg(r.msg);
                    }
                }
            });
        })
    }

    function preview(id) {
        window.open("/blog/open/post/"+id);
        //window.location.href="/blog/open/post/"+id;
    }
    function batchRemove() {
        var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组
        if (rows.length == 0) {
            layer.msg("请选择要删除的数据");
            return;
        }
        layer.confirm("确认要删除选中的'" + rows.length + "'条数据吗?", {
            btn : [ '确定', '取消' ]
            // 按钮
        }, function() {
            var ids = new Array();
            // 遍历所有选择的行数据，取每条数据对应的ID
            $.each(rows, function(i, row) {
                ids[i] = row['cid'];
            });
            $.ajax({
                type : 'POST',
                data : {
                    "ids" : ids
                },
                url : prefix + '/batchRemove',
                success : function(r) {
                    if (r.code == 0) {
                        layer.msg(r.msg);
                        reLoad();
                    } else {
                        layer.msg(r.msg);
                    }
                }
            });
        }, function() {

        });
    }

</script>
</body>
</html>